<template>
	<view class="changepwd">
		<view class="form">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
				<u-form-item label="原密码" labelWidth="160rpx" prop="oldPass" borderBottom>
					<u--input
						v-model="formData.oldPass"
						type="password"
						border="none"
						placeholder="请输入原密码"
					></u--input>
				</u-form-item>
				<u-form-item label="新密码" labelWidth="160rpx" prop="pass" borderBottom>
					<u--input
						v-model="formData.pass"
						type="password"
						border="none"
						placeholder="请输入新密码"
					></u--input>
				</u-form-item>
				<u-form-item label="确认密码" labelWidth="160rpx" prop="checkPass" borderBottom>
					<u--input
						v-model="formData.checkPass"
						type="password"
						border="none"
						placeholder="请再次输入新密码"
					></u--input>
				</u-form-item>
			</u--form>
		</view>

		<view class="btn_login">
			<button class="btn" plain :loading="loading" @click="changePwd">确认修改</button>
		</view>
	</view>
</template>

<script>
import api from '@/common/api.js';
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (value.length < 8) {
					callback(new Error('密码长度不小于8位数'));
				}
				if (this.form.checkPass !== '') {
					this.$refs.form.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.formData.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			formData: {
				oldPass: '',
				pass: '',
				checkPass: ''
			},
			rules: {
				oldPass: {
					required: true,
					message: '请输入原密码',
					trigger: ['blur']
				},
				pass: {
					validator: validatePass,
					required: true,
					trigger: ['blur']
				},
				checkPass: {
					validator: validatePass2,
					required: true,
					trigger: ['blur']
				}
			},
			loading: false
		};
	},
	onLoad() {},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		// 修改密码
		async changePwd() {
			let isPass = await this.validateForm();
			// console.log('isPass ==>', isPass);
			if (!isPass) {
				return false;
			}
			let tokenString = uni.getStorageSync('access_token');
			this.loading = true;
			let params = {
				old_password: this.formData.oldPass,
				new_password: this.formData.pass
			};
			try {
				let res = await this.$ajax.put(api.changePwd, params, {
					header: {
						Authorization: 'Bearer ' + tokenString
					}
				});
				// console.log('changePwdRes ==>', res);
				if (res.statusCode == '200') {
					uni.showToast({
						title: '修改密码成功'
					});
					this.formData = {
						oldPass: '',
						pass: '',
						checkPass: ''
					}
					this.$refs.form.clearValidate();
				}
				this.loading = false;
			} catch (e) {
				console.log(e);
				this.loading = false;
				uni.showToast({
					title: e.data.message,
					icon: 'error'
				});
			}
		},

		// 表单验证的方法
		validateForm() {
			return new Promise((resolve, reject) => {
				this.$refs.form
					.validate()
					.then(res => {
						resolve(true);
					})
					.catch(err => {
						resolve(false);
					});
			});
		}
	}
};
</script>

<style lang="scss">
.changepwd {
	.form {
		padding: 0 32rpx;
	}
	.btn_login {
		margin: 40rpx 32rpx;
	}
	.btn {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1890FF;
		color: #fff;
		border: 2rpx solid #1890FF;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
}
</style>
